<template>
  <div>
    <el-dialog v-model="dialogVisible" title="选择老人" width="700" :before-close="handleClose">
      <span>
        <!-- 表单 -->
        <el-form
          ref="ruleFormRef"
          :inline="true"
          :model="ruleForm"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="姓名：">
            <el-input v-model="ruleForm.name" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="ruleForm.idCard" placeholder="请输入" clearable />
          </el-form-item>
          <div style="float: right">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </div>
        </el-form>
        <!-- 表格 -->
        <ELTable v-bind="tableConfig" ref="elderlyTable" :isSelection="false">
          <template #operate="{ scope }">
            <el-button type="primary" @click="selectCurrent(scope.row)">选择</el-button>
          </template>
        </ELTable>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits } from "vue";
import { ListData, ListParams } from "../../../api/market/elderly/type";
import type { FormInstance } from "element-plus";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { getElderlyList } from "../../../api/market/elderly/elderly";
import { ElMessage } from "element-plus";
import { getCustomerList } from "@/api/market/customer/customer";

const emit = defineEmits(["close"]);
const ruleFormRef = ref<FormInstance>();

//dialog默认显示
const dialogVisible = ref(true);
const elderlyTable = ref();

const ruleForm = reactive<ListParams>({
  name: "",
  idCard: "",
});

//取消
const handleClose = () => {
  emit("close");
};

//查询
const search = () => {
  elderlyTable.value.getData(ruleForm);
};

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const tableConfig = reactive<TableData>({
  loadData: getCustomerList,
  columns: [
    {
      prop: "photo",
      label: "头像",
      image: true,
    },
    {
      prop: "name",
      label: "姓名",
    },
    {
      prop: "gender",
      label: "性别",
    },
    {
      prop: "idCard",
      label: "身份证号",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
    },
  ],
});

//选择
const selectCurrent = (data: ListData) => {
  if (data) {
    ElMessage({
      message: "选择老人成功",
      type: "success",
    });
    emit("close", data);
  }
};
</script>

<style scoped>
.el-input {
  width: 130px;
}
</style>
